<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Column</title>
  </head>

  <body>
    <script src="../../build/deps.js"></script>
    <script src="../../lib/datav.js"></script>
    <script src="../../lib/charts/column.js"></script>    
    <div id="chart"></div>
    <script>
    var source = [
      ['X','2012/3/1',18],
      ['Y','2012/3/1',102],
      ['Z','2012/3/1',102],
      ['X','2012/3/2',60],
      ['Y','2012/3/2',46],
      ['Z','2012/3/2',90],
      ['X','2012/3/3',200],
      ['Y','2012/3/3',102],
      ['X','2012/3/4',86],
      ['Y','2012/3/4',102],
      ['X','2012/3/5',4],
      ['Y','2012/3/5',190],
      ['X','2012/3/6',314],
      ['Y','2012/3/6',336],
      ['X','2012/3/7',72],
      ['Y','2012/3/7',124],
      // ['X','2012/3/8',42],
      ['Y','2012/3/8',74],
      // ['X','2012/3/9',418],
      ['Y','2012/3/9',418],
      // ['X','2012/3/10',68],
      ['Y','2012/3/10',324],
      // ['X','2012/3/11',68],
      ['Y','2012/3/11',68]
    ];
    // source.forEach(function (item) {
    //   if (item[0] === 'X') {
    //     item[0] = 'Y';
    //   } else if (item[0] === 'Y') {
    //     item[0] = 'X';
    //   }
    // });

    var column = new Column("chart", {
      "width": 980,
      "height": 600,
      "barWidth": 20,
      "yBase": 50
    });
    column.setSource(source, {
      column: 0,
      x: 1,
      value: 2
    });
    column.render();
    </script>
  </body>
</html>
